.flex {
  display: -webkit-flex;
  display: flex;
}
.flex-1 {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}
.flex-grow-1 {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.flex-grow-2 {
  -webkit-flex-grow: 2;
  flex-grow: 2;
}

// flex-direction 属性决定主轴的方向（即项目的排列方向）。
.flex-row {
  flex-direction: row;
  /*主轴为水平方向，起点在左端*/
}
.flex-row-reverse {
  flex-direction: row-reverse;
  /*主轴为水平方向，起点在右端*/
}
.flex-col {
  flex-direction: column;
  /*主轴为垂直方向，起点在上沿*/
}
.flex-col-reverse {
  flex-direction: column-reverse;
  /*主轴为垂直方向，起点在下沿*/
}

// flex-wrap 属性定义，如果一条轴线排不下，如何换行。
.flex-nowrap{
  flex-wrap: nowrap;
  /*（默认）：不换行*/
}
.flex-wrap{
  flex-wrap: wrap;
  /*换行，第一行在上方*/
}
.flex-wrap-reverse{
  flex-wrap: wrap-reverse;
  /*换行，第一行在下方*/
}

// justify-content 属性定义了项目在主轴上的对齐方式。
.flex-left {
  justify-content: flex-start;
  /*左对齐*/
}
.flex-center {
  justify-content: center;
  /*水平居中*/
}
.flex-right {
  justify-content: flex-end;
  /*右对齐*/
}
.flex-between {
  justify-content: space-between;
  /*两端对齐，项目之间的间隔都相等*/
}
.flex-around {
  justify-content: space-around;
  /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
}

// align-items 属性定义项目在交叉轴上如何对齐。
.align-items-stretch {
  align-items: stretch;
  /*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度*/
}
.align-items-baseline {
  align-items: baseline;
  /*项目的第一行文字的基线对齐*/
}
.align-items-center {
  align-items: center;
  /*垂直居中*/
}
.align-items-start {
  align-items: flex-start;
  /*顶部对齐*/
}
.align-items-end {
  align-items: flex-end;
  /*底部对齐*/
}

.align-content-start{
  align-content: flex-start;
}

.changheand{
  cursor: pointer;
}